import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getTopCategoryAPI } from '@/apis/category';
import { onBeforeRouteUpdate } from 'vue-router';

// 封装分类数据相关代码
export const useCategory = () => {
    const categoryData = ref({})
    const route = useRoute()
    const getTopCategory = async(id = route.params.id) => {
        const res = await getTopCategoryAPI(id)
        categoryData.value = res.result
    }
    onMounted(() => getTopCategory())

    // 在路由参数变化时，把分类数据接口重新发送
    onBeforeRouteUpdate((to) => {
        // console.log('路由变化');
        // console.log(to)
        getTopCategory(to.params.id)  // 使用最新的路由参数请求最新的分类数据
    })

    return { categoryData }
}